﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<style>
    [v-cloak] {
        display: none !important;
    }
    
    html, body {
        padding: 0;
        margin: 0;
        border: none;
        width: 100%;
        height: 100%;
    }

    .dialog-container {
        height: 100%;
        width: 100%;
        overflow: hidden;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        padding: 0;
        font-size: 14px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #e1e1e1;
    }

    .dialog-title {
        font-size: 20px;
        line-height: 50px;
        background-color: black;
        color: white;
        margin-top: 0;
        display: flex;
        display: -webkit-flex;
        padding: 0 20px;
    }
    .dialog-title span {
        font-size: 20px;
        line-height: 50px;
        margin-right: 20px;
    }

    .dialog-title-groupname {
        flex: 1;
    }

   .dialog-content {
        flex: 1;
        overflow-y: auto;
        /*display:flex;
        flex-direction:column;*/
    }

    .operation-container {
        height: 40px;
        display: flex;
        display: -webkit-flex;
        background: #fff;
        align-items: center;
    }

    #text {
        flex: 1;
        box-sizing: border-box;
        border: 1px solid #ccc;
        height: 34px;
        font-size: 15px;
        line-height: 34px;
        padding: 0 8px;
        resize: none;
    }

    #send {
        width: 40px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        border: 1px solid #1aac19;
        background-color: #1aac19;
        margin: 0 5px;
        border-radius: 5px;
        color: #fff;
        font-size: 14px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding: 0;
    }


    .dialog-item{
        display:flex;
        display:-webkit-flex;
        flex-direction:column;
    }

    .dialog-date,.dialog-withdraw {
        background-color: #cecece;
        color: #fff;
        margin: 15px auto 5px;
        text-align: center;
        border-radius: 5px;
    }

    .dialog-withdraw {
        background-color: #c1c1c1;
        border-radius: 2px;
    }

        .dialog-content-item {
        display: flex;
        display: -webkit-flex;
    }

    .dialog-content-item.self{
        flex-direction:row-reverse;
        -ms-flex-direction:row-reverse;
    }

        .dialog-content-item.self .dialog-content-name {
            align-self: flex-end;
        }

        .dialog-content-item.self .dialog-content-detail {
            background-color: #98e165;
        }

        .dialog-content-actavter {
            width: 40px;
            height: 40px;
            border-radius: 2px;
            margin: 0 10px;
            background-image: url(../../Static/Images/default.jpg);
            background-size: cover;
            flex-grow:0;
        }


    .dialog-content-detail-container {
        display: flex;
        flex-direction: column;
        max-width: 70%;
    }


    .dialog-content-name{
        font-size:10px;
        color:#999;
    }

    .dialog-content-detail {
        background-color: white;
        padding: 9px 13px;
        font-size: 14px;
        border-radius: 3px;
        text-align: left;
        word-break: break-all; /* 支持IE和chrome，FF不支持*/
        word-wrap: break-word; /* 以上三个浏览器均支持 */
    }


</style>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <title>Chat</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div class="dialog-container" id="chat" v-cloak>
        <div class="dialog-title">
            <span class="glyphicon glyphicon-chevron-left" @@click="backHome"></span>
            <div class="dialog-title-groupname"><label>{{records.GroupName}}</label></div>
            <label>···</label>
        </div>
        <div class="dialog-content">
            <div class="dialog-item" v-for="(item,index) in records.Data">

                <div class="dialog-date">{{item.CreateTime}}</div>
                <div v-if="!item.IsWithdrawed">
                    <div :class="item.From.Id==currentUserId?'dialog-content-item self':'dialog-content-item'">
                        <div class="dialog-content-actavter"></div>
                        <div class="dialog-content-detail-container">
                            <div class="dialog-content-name">{{item.From.Id==currentUserId?"我":item.From.NickName}}</div>
                            <div class="dialog-content-detail" @@click="withdrawMsg(item.Id)">
                                {{item.Content}}
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else class="dialog-withdraw">{{item.From.NickName}}撤回了一条消息</div>
            </div>
            <div id="lastrecord"><br/></div>
        </div>
        <div class="operation-container">
            <input id="text" rows="4" cols="30"  type="text" v-model="sendText"  @@keyup.enter="sendMsg" />
            <button id="send"  >发送</button>
        </div>
    </div>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.3.0.min.js"></script>
    <script src="/chat/hubs"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#chat',
            data: {
                currentUserId: @Request["UserId"],
                currentGroupId:@Request["GroupId"],
                records: {
                    GroupName: "",
                    Data: []
                },
                sendText: "",
                sendPicture: null,
                sendVocie: null

            },
            created: function () {
                this.$nextTick(function () {
                    this.initSignalR();
                   // this.getList();
                });
            },
            methods: {
                withdrawMsg: function (userid,contentid) {
                    if (userid != this.currentUserId) {
                        return;
                    }
                    var _this = this;
                    var withdraw = confirm("撤销后不可更改");
                    if (withdraw) {
                        $.ajax({
                            url: '@Href("~/api/ChatRecords/WithdrawContent")' ,
                            data: {
                                contentId: contentid
                            },
                            async: false,
                            success: function (result) {

                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                alert(XMLHttpRequest.responseText);
                            },
                            dataType: "json"
                        })
                    }
                    else {
                        return;
                    }
                },
                sendMsg: function () {
                    var _this = this;
                    $.ajax({
                        type: "post",
                        url: '@Href("~/api/ChatRecords/SendMsg")',
                        data:
                            JSON.stringify({
                                Id: 0,
                                CreateTime: "",
                                FromUserId: _this.currentUserId,
                                ToGroupId: _this.currentGroupId,
                                ToUserId: 0,
                                Content: {
                                    Id: 0,
                                    Text: _this.sendText,
                                    Picture: _this.sendPicture,
                                    Voice: _this.sendVocie
                                }
                            })
                        ,
                        async: false,
                        success: function (result) {
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(XMLHttpRequest.responseText);
                        },
                        dataType: "json",
                        contentType: "application/json"
                    });
                    this.initSendContent();
                    $("#text").focus();      
                },
                initSendContent: function(){
                    this.sendText = "";
                    this.sendPicture = null;
                    this.sendVocie = null;
                },
                backHome: function () {
                    window.location.href= '@Href("~/FlexShow/home")?userId=@Request["userid"]';
                },
                initSignalR: function () {
                    var _this = this;
                        $.connection.hub.start()
                            .done(function () {
                                console.log("Connected!");
                               // $(document).trigger("Connected");
                            })
                        .fail(function () { console.log("Could not Connect!"); });
                    $("#send").click(function () {
                        var chat = $.connection.chat;
                            chat.server.group(_this.currentGroupId).done(function (data) {
                                alert(data);
                                _this.records = data.Data;
                        }).fail(function () { alert("入组失败") });
                            debugger;
                    });
                   
                }
            }

            });
    </script>
</body>
</html>
